<template>
  <div class="h-full flex flex-col bg-white">
    <!-- 标题栏 -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
      <h3 class="text-sm font-medium text-gray-700">Watch 表达式</h3>
      <div class="flex items-center gap-2">
        <el-button
          type="text"
          icon="el-icon-refresh"
          size="small"
          class="!text-primary-500 hover:!text-primary-600"
          :loading="loading"
          @click="$emit('refresh')"
          title="刷新所有表达式"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- Watch 表达式列表 -->
    <div class="flex-1 overflow-y-auto" v-loading="loading">
      <!-- 空状态 -->
      <div
        v-if="watches.length === 0"
        class="flex flex-col items-center justify-center h-48 text-gray-400"
      >
        <i class="el-icon-view text-5xl mb-2 opacity-50"></i>
        <p class="text-sm my-1">暂无 Watch 表达式</p>
        <p class="text-xs my-1 opacity-70">点击下方添加按钮创建</p>
      </div>

      <!-- Watch 表达式列表 -->
      <div v-else class="py-1">
        <div
          v-for="watch in watches"
          :key="watch.id"
          class="px-4 py-2 border-b border-gray-50 hover:bg-gray-50 transition-colors"
        >
          <div class="flex items-start justify-between mb-1">
            <div class="flex-1 min-w-0">
              <div class="text-sm font-mono text-blue-600 mb-1 break-all">
                {{ watch.expression }}
              </div>
              <div class="text-xs">
                <span v-if="watch.loading" class="text-gray-400">
                  <i class="el-icon-loading"></i> 计算中...
                </span>
                <span v-else-if="watch.error" class="text-red-500">
                  <i class="el-icon-warning"></i> {{ watch.error }}
                </span>
                <div v-else class="flex items-start gap-2">
                  <span class="text-teal-600">{{ watch.type || 'unknown' }}</span>
                  <span class="text-orange-700 flex-1 break-all">{{ formatValue(watch) }}</span>
                </div>
              </div>
            </div>
            <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              class="!text-red-400 hover:!text-red-600 flex-shrink-0 ml-2"
              @click="$emit('remove', watch.id)"
              title="删除表达式"
            />
          </div>
          <!-- 变量树（如果有子节点） -->
          <div v-if="watch.children && watch.children.length > 0" class="ml-4 mt-2">
            <variable-tree-node
              v-for="(child, index) in watch.children"
              :key="index"
              :variable="child"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 添加表达式输入框 -->
    <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
      <div class="flex gap-2">
        <el-input
          v-model="newExpression"
          placeholder="输入 Go 表达式，如：len(slice), user.Name"
          size="small"
          @keyup.enter.native="handleAdd"
          class="flex-1"
        >
          <i slot="prefix" class="el-input__icon el-icon-edit"></i>
        </el-input>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          :disabled="!newExpression.trim()"
        >
          添加
        </el-button>
      </div>
      <div class="text-xs text-gray-500 mt-2">
        支持复杂表达式：<code class="bg-white px-1 rounded">len(arr)</code>、
        <code class="bg-white px-1 rounded">user.Name + " " + user.Email</code>
      </div>
    </div>
  </div>
</template>

<script>
import VariableTreeNode from './VariableTreeNode.vue'

export default {
  name: 'WatchPanel',
  components: {
    VariableTreeNode
  },
  props: {
    watches: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      newExpression: ''
    }
  },
  methods: {
    handleAdd() {
      const expression = this.newExpression.trim()
      if (expression) {
        this.$emit('add', expression)
        this.newExpression = ''
      }
    },

    formatValue(watch) {
      if (!watch || watch.loading) return ''
      if (watch.error) return ''

      const val = watch.value
      const kind = watch.kind

      if (val === undefined || val === null) {
        return 'nil'
      }

      if (kind === 'String') {
        return `"${val}"`
      }

      if (kind === 'Bool') {
        return val ? 'true' : 'false'
      }

      if (watch.children && watch.children.length > 0) {
        if (kind === 'Slice' || kind === 'Array') {
          return `[${watch.len || 0}]`
        }
        if (kind === 'Map') {
          return `{${watch.len || 0}}`
        }
        if (kind === 'Struct') {
          return '{...}'
        }
        if (kind === 'Ptr') {
          return watch.addr || '0x0'
        }
      }

      return String(val)
    }
  }
}
</script>

<style scoped>
code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
}
</style>
